<template>

  <div class="menus divw pt10 rela" >
    
    <ul class="clearfix" >
      <li class="fl" v-for="(item,index) in imgList" :key="index" style="width: 20%">
        <a class="db">
            <img :src="item.img_url" class="w100 db">
        </a>
      </li>
    </ul>
  </div>
 
</template>
 
<script>
export default {
  data() {
    return {
      imgList: [],
    };
  },
  async mounted() {
    let result = await this.$http.get({
      url: "/index/main.html",
      params: {
        do: "getStaticV415",
        cdn_version: "202101090854261",
        pet_type: "dog",
        version: "550",
        is_single: "0",
        isWeb: 1,
        system: "wap",
        distinct_id:
          "1768a295992703-0f83f11c740bf1-230346d-1327104-1768a29599362d",
        debug_param: "",
      },
    });
    this.imgList = result.datas.list[0].data.menus;
    // console.log(result.datas.list[0].data.menus);
  },
};
</script>

<style lang="stylus" scoped>
.banner-menu .menus {
  background-image: -webkit-gradient(linear, left bottom, left top, from(#f3f4f5), to(#ffffff));
  background-image: linear-gradient(0deg, #f3f4f5, #ffffff);
  
}

.divw {
  max-width: 7.5rem;
  min-width: 3.2rem;
  margin: 0 auto;
}

.rela, .relative {
  position: relative;
}



.fl {
  float: left;
}
.banner-menu .menus img {
    display: block;
}
.w100 {
    width: 100%;
}
ol, ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.pt10 {
    padding-top: 0.1rem;
}
</style>